<template>
  <div id="about">
    <el-container>
      <el-header>
        <el-row
          class="banner-box"
          :gutter="30"
          type="flex"
          justify="space-between"
        >
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <img class="logo" src="@/assets/logo.png" alt="" />
            </div>
          </el-col>
          <!-- <el-col :span="20"
            ><div class="grid-content bg-purple-light">
              <h3>后台管理系统</h3>
            </div></el-col
          > -->
          <el-col :span="2">
            <div class="grid-content bg-purple">szs</div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <Child ref="child" :list="list" v-on:titleChanged="updateTitle"></Child>
    <h2>{{ title }}</h2>

    <h3>父组件</h3>
    <input type="button" @click="get_child_value" value="获取子组件中的值" />
    value_in_parent: {{ value_in_parent }}
  </div>
</template>

<script>
import Child from "@/views/Child.vue";
export default {
  name: "",
  data() {
    return {
      value_in_parent: "",
      list: [
        {
          id: 1,
          name: "德莱文",
        },
        {
          id: 2,
          name: "秦羽",
        },
      ],
      title: "我是父组件的标题",
    };
  },
  components: { Child },

  methods: {
    get_child_value() {
      this.value_in_parent = this.$refs.child.value_in_child; // 接收从子组件传递过来的值
    },
    updateTitle(e) {
      this.title = e;
    },
  },
};
</script>

<style>
.content-box {
  background: pink;
}

.el-header {
  background: pink;
}
.el-aside {
  background: palegreen;
}

.el-main {
  background: salmon;
}

.el-footer {
  background: seagreen;
}

.logo {
  width: 50px;
}

.banner-box {
  display: flex;
  align-items: center;
}
</style>